<!-- UserList.vue -->
<template>
  <div class="main-box">
    <!-- 左侧部门树筛选 -->
    <TreeFilter
      ref="treeFilterRef"
      title="部门"
      label="FName"
      :request-api="getDepartmentTreeApi"
      @change="changeTreeFilter"
      @loaded="handleTreeLoaded"
    />

    <!-- 用户列表 -->
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" :request-api="getUserListApi" :row-key="'FId'" :init-param="initParam">
        <!-- 表头按钮 -->
        <template #tableHeader>
          <el-button v-auth="'user:add'" type="primary" :icon="CirclePlus" @click="openDialog()">新增用户</el-button>
        </template>

        <!-- 模块分类列 -->
        <template #module="{ row }">
          <el-tag v-if="row.FModuleName">{{ row.FModuleName }}</el-tag>
          <el-tag type="info" v-else>未分类</el-tag>
        </template>

        <!-- 操作列 -->
        <template #operation="{ row }">
          <el-button v-auth="'user:edit'" type="primary" link :icon="EditPen" @click="openDialog(row)">编辑</el-button>
          <el-button v-auth="'user:delete'" type="danger" link :icon="Delete" @click="handleDelete(row.FUserId)">删除</el-button>
          <el-button v-auth="'user:edit'" type="warning" link @click="openRoleDialog(row)">分配角色</el-button>
        </template>
      </ProTable>
    </div>

    <!-- 新增/编辑用户弹窗 -->
    <AccountDialog v-if="showAccountDialog" ref="AccountDialogRef" @refresh="refreshTable" @close="closeDialog" />

    <!-- 分配角色弹窗 -->
    <RoleDialog
      v-if="showRoleDialog"
      ref="roleDialogRef"
      :user-id="currentUserId"
      @close="showRoleDialog = false"
      @refresh="refreshTable"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import AccountDialog from "./components/AccountDialog.vue";
import RoleDialog from "./components/RoleDialog.vue";

import { getUserListApi, deleteUserApi } from "@/api/modules/admin";
import { getDepartmentTreeApi } from "@/api/modules/department";
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Admin } from "@/api/interface/admin";

// 表格和树引用
const proTable = ref<ProTableInstance>();
const treeFilterRef = ref();
const AccountDialogRef = ref<InstanceType<typeof AccountDialog>>();
const roleDialogRef = ref<InstanceType<typeof RoleDialog>>();

// 弹窗状态
const showAccountDialog = ref(false);
const showRoleDialog = ref(false);

// 当前选中的部门ID和用户ID
const currentModuleId = ref("");
const currentUserId = ref("");

// 初始化参数
const initParam = reactive({
  departmentId: ""
});

// 表格列配置
const columns: ColumnProps<Admin.UserItem>[] = [
  { prop: "FUsername", label: "用户名", width: 180, search: { el: "input" } },
  { prop: "FDepartmentName", label: "部门", width: 180 },
  { prop: "FCreatedAt", label: "创建时间" },
  { prop: "operation", label: "操作", fixed: "right", width: 240 }
];

// 树加载完成
const handleTreeLoaded = () => {
  if (treeFilterRef.value) {
    currentModuleId.value = treeFilterRef.value.getSelectedValue() || "";
    initParam.departmentId = currentModuleId.value;
    refreshTable();
  }
};

// 树筛选变化
const changeTreeFilter = (moduleId: string) => {
  currentModuleId.value = moduleId;
  initParam.departmentId = moduleId;
  refreshTable();
};

// 刷新表格
const refreshTable = () => {
  proTable.value?.getTableList();
};

// 打开新增/编辑用户弹窗
const openDialog = (row?: Admin.UserItem) => {
  showAccountDialog.value = true;
  nextTick(() => {
    AccountDialogRef.value?.open(row);
  });
};

// 关闭用户弹窗
const closeDialog = () => {
  showAccountDialog.value = false;
};

// 打开角色弹窗
const openRoleDialog = (row: Admin.UserItem) => {
  currentUserId.value = row.FUserId;
  showRoleDialog.value = true;
};

// 删除用户
const handleDelete = async (id: string) => {
  try {
    await ElMessageBox.confirm("确认删除该用户?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    });
    await deleteUserApi({ FUserId: id });
    ElMessage.success("删除成功");
    refreshTable();
  } catch {
    // 用户取消
  }
};
</script>

<style scoped>
.main-box {
  display: flex;
  height: 100%;
  .table-box {
    flex: 1;
    margin-left: 20px;
    overflow: hidden;
  }
}
</style>
